<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      {{msg}}

      <Foo
        @heihei="handleHeihei"
        :title="titleValue"
        @change-title="handleChangeTitle"
      ></Foo>
    </div>
    <script>
      // emit -> output
      const Foo = {
        props: ["title"],
        template: `<div>Foo
          
            title: {{title}}
            <button @click="handleClick">click</button>
            <button @click="changeTitle">changeTitle</button>
          
          </div>`,
        methods: {
          handleClick() {
            // output
            // change title
            this.$emit("heihei");
          },
          changeTitle() {
            // this.$props.title = xx
            this.$emit("change-title", "new title", "old title");
          },
        },
      };

      const app = new Vue({
        el: "#app",
        components: {
          Foo,
        },
        data: {
          msg: "hello ",
          titleValue: "app title",
        },
        methods: {
          handleHeihei() {
            console.log("heihei - child");
          },
          handleChangeTitle(v, b) {
            console.log(v, b);
            this.titleValue = v;
          },
        },
      });
    </script>
  </body>
</html>
